<template>
  <div style="margin: 10px 0">
    <div class="header">
      <el-input style="margin-left: 80px" size="mini" class="searchInput" v-model.trim="inputValue" placeholder="书名、作者" clearable/>

      <el-button style="margin-left: 5px" size="mini" type="primary" icon="el-icon-search" @click="search">
        搜索
      </el-button>
      <el-button style="margin-left: 10px" size="mini" type="info" icon="el-icon-refresh"
                 @click="clearInput">清空
      </el-button>

    </div>
    <div class="main">
      <div style="display: flex; margin-top: 10px; margin-left: 80px">
        <el-tabs type="border-card">
          <el-tab-pane label="全部">
            <div class="images">
              <div v-for="(item, index) in table.data" :key="index" class="image-middle">
                <el-image :src="table.data[index].bookCoverUrl" class="image"/>
                <div class="text-wrapper">
                  <p class="name">{{ table.data[index].name }}</p>
                  <p style="font-size: 12px">{{ table.data[index].author }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="文学">文学</el-tab-pane>
          <el-tab-pane label="小说">小说</el-tab-pane>
          <el-tab-pane label="历史文化">历史文化</el-tab-pane>
          <el-tab-pane label="社会纪实">社会纪实</el-tab-pane>
          <el-tab-pane label="科学新知">科学新知</el-tab-pane>
          <el-tab-pane label="艺术设计">艺术设计</el-tab-pane>
          <el-tab-pane label="商业经管">商业经管</el-tab-pane>
          <el-tab-pane label="绘本漫画">绘本漫画</el-tab-pane>
          <el-tab-pane label="散文">散文</el-tab-pane>
          <el-tab-pane label="自传">自传</el-tab-pane>
        </el-tabs>
        <div class="lined-div">
          <span><b>热门标签</b></span>
          <div class="solid-line"></div>
          文学<br>
          <el-tag style="margin-left: 5px" @click="getTag('小说')">小说</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('随笔')">随笔</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('日本文学')">日本文学</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('散文')">散文</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('诗歌')">诗歌</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('童话')">童话</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('名著')">名著</el-tag>
          <div class="dashed-line"></div>
          流行<br>
          <el-tag style="margin-left: 5px" @click="getTag('漫画')">漫画</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('推理')">推理</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('绘本')">绘本</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('科幻')">科幻</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('青春')">青春</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('言情')">言情</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('奇幻')">奇幻</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('武侠')">武侠</el-tag>
          <div class="dashed-line"></div>
          文化<br>
          <el-tag style="margin-left: 5px" @click="getTag('历史')">历史</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('哲学')">哲学</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('传记')">传记</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('设计')">设计</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('电影')">电影</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('建筑')">建筑</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('回忆录')">回忆录</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('音乐')">音乐</el-tag>
          <div class="dashed-line"></div>
          生活<br>
          <el-tag style="margin-left: 5px" @click="getTag('旅行')">旅行</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('励志')">励志</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('教育')">教育</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('职场')">职场</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('美食')">美食</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('灵修')">灵修</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('健康')">健康</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('家具')">家具</el-tag>
          <div class="dashed-line"></div>
          经管<br>
          <el-tag style="margin-left: 5px" @click="getTag('经济学')">经济学</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('管理')">管理</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('商业')">商业</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('金融')">金融</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('营销')">营销</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('理财')">理财</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('股票')">股票</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('企业史')">企业史</el-tag>
          <div class="dashed-line"></div>
          科技<br>
          <el-tag style="margin-left: 5px" @click="getTag('科普')">科普</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('互联网')">互联网</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('编程')">编程</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('交互设计')">交互设计</el-tag>
          <el-tag style="margin-left: 5px" @click="getTag('算法')">算法</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('通讯')">通讯</el-tag>
          <el-tag style="margin-left: 5px; margin-top: 5px" @click="getTag('神经网络')">神经网络</el-tag>
          <div class="dashed-line"></div><br>
            <div class="section weekly-top">
              <div class="hd">
                <span><b>畅销图书榜</b></span>
                <div class="solid-line"></div>
              </div>
              <div class="bd">
                <ul class="list list-ranking">
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=26291216&amp;isbn=7530214659&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/26291216/" class="name" target="_blank" style="text-decoration: none;">我们生活在巨大的差距里</a>
                      <div class="author">余华</div>
                    </div>
                    <div class="dashed-line"></div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=25915102&amp;isbn=7510448182&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/25915102/" class="name" target="_blank" style="text-decoration: none;">写给儿童的中国历史1</a>
                      <div class="author">陈卫平</div>
                    </div>
                    <div class="dashed-line"></div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=30763438&amp;isbn=7107325515&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/30763438/" class="name" target="_blank" style="text-decoration: none;">快乐读书吧丛书（人教版）：读读童谣和儿歌（共四册） 一年级下册</a>
                      <div class="author">曹文轩 陈先云 主编</div>
                    </div>
                    <div class="dashed-line"></div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=34432750&amp;isbn=7020139590&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/34432750/" class="name" target="_blank" style="text-decoration: none;">额尔古纳河右岸</a>
                      <div class="author">迟子建</div>
                      <div class="dashed-line"></div>
                    </div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=6079389&amp;isbn=7020084354&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/6079389/" class="name" target="_blank">我与地坛</a>
                      <div class="author">史铁生</div>
                      <div class="dashed-line"></div>
                    </div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=36593611&amp;isbn=7522520223&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/36593611/" class="name" target="_blank">深度关系</a>
                      <div class="author">武志红</div>
                      <div class="dashed-line"></div>
                    </div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=32567720&amp;isbn=7107316478&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/32567720/" class="name" target="_blank" style="text-decoration: none;">快乐读书吧丛书（人教版）：中国古代寓言 三年级下册</a>
                      <div class="author">曹文轩/陈先云 主编</div>
                      <div class="dashed-line"></div>
                    </div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=36218539&amp;isbn=755018058X&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/36218539/" class="name" target="_blank" style="text-decoration: none;">经典常谈</a>
                      <div class="author">朱自清</div>
                      <div class="dashed-line"></div>
                    </div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=32165792&amp;isbn=7107316370&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/32165792/" class="name" target="_blank" style="text-decoration: none;">快乐读书吧丛书（人教版）：伊索寓言  三年级下册</a>
                    </div>
                    <div class="author">曹文轩/陈先云 主编</div>
                    <div class="dashed-line"></div>
                  </li>
                  <li class="item impression_track_chart" data-track="https://frodo.douban.com/rohirrim/tracking/impression?subject_id=32567719&amp;isbn=710731646X&amp;source=dangdang&amp;user_id=278558382&amp;bid=Ik5fvXHtVW4&amp;platform=pc&amp;location=vendor_charts">
                    <div class="book-info">
                      <a href="https://book.douban.com/subject/32567719/" class="name" target="_blank" style="text-decoration: none;">快乐读书吧丛书（人教版）： 克雷洛夫寓言 三年级下册</a>
                      <div class="author">曹文轩/陈先云 主编</div>
                      <div class="dashed-line"></div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
        </div>
      </div>
      <div class="footer" style="margin-left: 70px" v-if="table.data.length > 0">
        <el-pagination
            background
            layout="sizes,prev, pager, next, jumper, ->, total"
            :total="table.total"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="table.pageSize"
            :current-page="table.pageNo"
            :page-count="table.pages"
            @size-change="table.handleSizeChange"
            @current-change="table.handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>



  </div>
</template>
<script>

import { page } from "@/views/book/list/api";

export default {
  name: "index",
  components: { },
  computed: {},
  created() {},
  mounted() {},
  data() {
    let _vm = this;
    return {
      inputValue: '',
      imgArr: [],
      table: {
        tbLoading: false,
        /* 选中行数据 */
        sRows: [],
        data: [],
        pageNo: 1,
        pages: 0,
        pageSize: 10,
        pageCount: 0,
        sortField: "",
        sortMode: void 0,
        handleSizeChange(pageSize) {
          if (pageSize === _vm.table.pageSize) {
            return;
          }
          _vm.table.pageSize = pageSize;
          _vm.getBookList();
        },
        handleCurrentChange(pageNo) {
          if (pageNo === _vm.table.pageNo) {
            return;
          }
          _vm.table.pageNo = pageNo;
          _vm.getBookList();
        },
        sRowChange(rows) {
          _vm.table.sRows = rows;
        }
      },
      query: {
        name: '',
        categoryId: void 0
      },
      options: {
        category: {
          loading: true,
          loadingText: "获取选项中...",
          data: []
        }
      },
    }
  },
  methods: {
    search() {
      // 处理搜索逻辑
      this.query.name = this.inputValue
      this.getBookList();
    },
    clearInput() {
      this.inputValue = ''; // 清空输入框的值
      this.query.name = '';
      this.getBookList();
    },
    getBookList() {
      this.table.loading = true;
      let params = {
        pageNo: this.table.pageNo,
        pageSize: this.table.pageSize,
        name: this.query.name,
        categoryId: this.query.categoryId
      }
      page(params).then(res => {
        console.log("res", res)
        this.table.data = res.list
        this.table.pageNo = res.pageNo
        this.table.pageCount = res.total
        this.table.pageSize = res.pageSize
        this.table.pages = res.pages
      }).finally(() => {
        this.table.loading = false;
      });
    },
    getTag(tag) {
      this.$message.success(tag)
    }
  },
}
</script>
<style scoped>
.header {
  margin: 10px 0 10px 0;
}
.searchInput {
  margin: 0 5px;
  width: 13%;
}
.main{
  height: 720px;
  margin: 0 0;
}
.footer {
  display: flex;
  justify-content: space-between;
}

/* 图片总布局，样式 */
.images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Horizontally center align */
  max-width: 897px; /* Set maximum width */
  margin: 0 auto; /* Center align */
}

/* 设置宽度，确保每行 5 幅图像 */
.image-middle {
  margin-left: 10px;
  margin-top: 17px;
  margin-bottom: 20px; /* Adjust bottom margin */
  width: calc(20% - 10px); /* Calculate width to ensure 5 images per row */
  max-width: 220px; /* Set maximum width for each image container */
}

/* 单张图片样式 */
.image{
  width: 100%; /* Ensure image takes up full width of its container */
  height: auto; /* Automatically adjust height */
  max-width: 200px; /* Set maximum width for each image */
}

.lined-div {
  padding: 20px; /* 内边距为20px */
  width: 440px; /* 宽度为300px */
  margin: 0 auto; /* 水平居中 */
}

.solid-line {
  border-bottom: 1px solid #999; /* 单条实线 */
  width: 100%; /* 设置实线的宽度 */
  height: 0; /* 设置实线的高度 */
  margin-top: 10px; /* 可选：设置实线的上边距 */
  margin-bottom: 10px; /* 可选：设置实线的下边距 */
}

.dashed-line {
  border-bottom: 1px dashed #999; /* 单条虚线 */
  width: 100%; /* 设置虚线的宽度 */
  height: 0; /* 设置虚线的高度 */
  margin-top: 10px; /* 可选：设置虚线的上边距 */
  margin-bottom: 10px; /* 可选：设置虚线的下边距 */
}
.name {
  text-decoration: none;
  color: #3377B2;
}
</style>